import React from 'react';
import { render } from 'react-dom';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { WebTool } from '../lib/webtool';
//import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

var userName = WebTool.getQueryVariable('user');

// render(
//     <div>
//         <p>
//             Username:<br /><input type="text" name="user" placeholder="your username" value="{{user}}" autoFocus />
//         </p>

//         <p>
//             Password:<br /><input type="password" name="pass" placeholder="your password" value="" />
//         </p>

//         <p>
//             <Button type="primary" htmlType="submit">Log in</Button>
//         </p>
//     </div>, document.getElementById('login-form'));

class NormalLoginForm extends React.Component {
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // console.log('Received values of form: ', values);
                // this.props.form.submit(values);
               document.getElementById('login-form').submit();
            }
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;

        if (userName) {
            setTimeout(() => {
                this.props.form.setFieldsValue({ username: userName });
            }, 0);
        }

        return (
            <Form id="login-form" onSubmit={this.handleSubmit} className="login-form" action="/login" method="post">
                <Form.Item>
                    {getFieldDecorator('username', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                        <Input name="user"
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="Username"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input name="pass"
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password"
                            placeholder="Password"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {/* {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true,
            })(<Checkbox>Remember me</Checkbox>)}
            <a className="login-form-forgot" href="">
              Forgot password
            </a> */}
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Log in
            </Button>
                    Or <a href="register">register now!</a>
                </Form.Item>
            </Form>
        );
    }
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);

render(<WrappedNormalLoginForm />, document.getElementById('login-container'));